<template>
    <div>
        <Form>
            <div class="form-style">
                <div class="time-text">
                    <DatePicker v-model="chooseTime" type="datetimerange"
                                format="yyyy-MM-dd HH:mm" placeholder="请选择统计的时间段">
                    </DatePicker>
                </div>
                <div class="btn-style">
                    <Button :loading="timeBtnLoading" type="primary" @click="timeBtn" class="btn-style">统计扫码总数</Button>
                    <Button :loading="timeBtnLoading" type="warning" @click="dataBtn" class="btn-style">下载红黄码人员数据</Button>
                </div>
            </div>
        </Form>
        <Row type="flex" justify="space-around" :gutter="20">
            <Col span="7">
                <Card style="height: 300px;overflow-y: auto;">
                    <div class="out-style">
                        <h2 class="title-h2">扫码统计</h2>
                        <Divider/>
                        <div class="sum-style">
                            <p>当前二维码总数：{{scanData.total}}</p>
                            <p>当前扫码总数：{{scanData.qrTotal}}</p>
                        </div>
                        <div class="view-content">
                            <!--                            <p>当前二维码总数：{{scanData.total}}</p>-->
                            <!--                            <p>当前扫码总数：{{scanData.qrTotal}}</p>-->
                            <p>时间段内扫码总数：{{scanData.totalTime}}</p>
                        </div>
                    </div>
                </Card>
            </Col>
            <Col span="10">
                <Card style="height: 300px;overflow-y: auto;">
                    <div style="text-align:center">
                        <h2>外籍人员统计</h2>
                        <Divider/>
                        <div>
                            <p>白名单总数：{{ foreignData.whiteCount }}</p>
                            <p>【总数{{foreignData.waiGuoCount+foreignData.TaiWanCount+foreignData.XgAmCount}}】/【绿码{{
                                foreignData.waiGuoColor[0]+foreignData.TaiWanColor[0]+foreignData.XgAmColor[0] }}】/【黄码{{
                                foreignData.waiGuoColor[1]+foreignData.TaiWanColor[1]+foreignData.XgAmColor[1] }}】/【红码{{
                                foreignData.waiGuoColor[2]+foreignData.TaiWanColor[2]+foreignData.XgAmColor[2] }}】/【错误{{
                                foreignData.waiGuoColor[3]+foreignData.TaiWanColor[3]+foreignData.XgAmColor[3] }}】</p>
                            <p>外国人：「绿码{{ foreignData.waiGuoColor[0] }}」「黄码{{ foreignData.waiGuoColor[1] }}」「红码{{
                                foreignData.waiGuoColor[2]
                                }}」「错误{{ foreignData.waiGuoColor[3] }}」</p>
                            <p>台湾人：「绿码{{ foreignData.TaiWanColor[0] }}」「黄码{{ foreignData.TaiWanColor[1] }}」「红码{{
                                foreignData.TaiWanColor[2]
                                }}」「错误{{ foreignData.TaiWanColor[3] }}」</p>
                            <p>香港澳门：「绿码{{ foreignData.XgAmColor[0] }}」「黄码{{ foreignData.XgAmColor[1] }}」「红码{{
                                foreignData.XgAmColor[2] }}」「错误{{
                                foreignData.XgAmColor[3] }}」</p>
                        </div>
                    </div>
                </Card>
            </Col>
            <Col span="7">
                <Card style="height: 300px;overflow-y: auto;">
                    <div style="text-align:center">
                        <h2>优惠券统计</h2>
                        <Divider/>
                        <p>{{couponData.msg}}</p>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import {
  qrCodeTongJiGo,
  waiJiShuLiang,
  getSubsidyTotal,
  allPlaceNum
} from '@/api/statistics'
import { formatDate } from '@/components/dateFormat'

export default {
  name: 'typeCard',
  props: {},
  data () {
    return {
      timeBtnLoading: false,
      chooseTime: '',
      scanData: {
        total: null,
        scanData: null,
        totalTime: null
      },
      foreignData: {
        whiteCount: null,
        waiGuoCount: null,
        TaiWanCount: null,
        XgAmCount: null,
        waiGuoColor: [],
        TaiWanColor: [],
        XgAmColor: []
      },
      couponData: {
        msg: null
      }
    }
  },
  methods: {
    dataBtn () {
      location.href = 'http://sstpw.tripln.top/wl/excel/getRedAndOrange'
    },
    timeBtn () {
      const startTime = this.chooseTime[0] !== '' ? formatDate(this.chooseTime[0], 'yyyy-MM-dd hh:mm:ss') : ''
      const endTime = this.chooseTime[1] !== '' ? formatDate(this.chooseTime[1], 'yyyy-MM-dd hh:mm:ss') : ''
      console.log(startTime, endTime, '选择的时间')
      if (startTime !== '' && endTime !== '') {
        this.timeBtnLoading = true
        const param = {
          begin_time: startTime,
          endTime: endTime
        }
        allPlaceNum(param).then(ret => {
          console.log(ret, 'jiekou')
          let data = ret.data
          if (data.errcode === 200) {
            this.scanData.totalTime = data.data.total
            this.timeBtnLoading = false
          } else {
            this.error(data)
            this.timeBtnLoading = false
          }
        })
      } else {
        this.$Message.error({
          content: '请选择时间段'
        })
        this.timeBtnLoading = false
      }
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    initAction () {
      // 扫码统计
      qrCodeTongJiGo().then(ret => {
        if (ret.data.errcode === 200) {
          this.scanData.total = ret.data.data.total
          this.scanData.qrTotal = ret.data.data.qrTotal
        }
      })
      // 外籍人员统计
      waiJiShuLiang().then(ret => {
        if (ret.data.errcode === 200) {
          this.foreignData = ret.data.data
        }
      })
      // 优惠券统计
      getSubsidyTotal().then(ret => {
        if (ret.data.errcode === 200) {
          this.couponData.msg = ret.data.data.msg
        }
      })
    }
  },
  mounted () {
    this.initAction()
  },
  watch: {},
  computed: {}
}
</script>
<style scoped>
    .title-h2 {
        text-align: center;
    }

    /deep/ .ivu-input {
        width: 280px;
    }
    .view-content {
        margin-top: -10px;
        text-align: center;
    }

    .sum-style {
        margin-bottom: 10px;
        text-align: center;
    }

    .form-style {
       display: flex;
        margin-bottom: 10px;
    }
    .btn-style {
        margin-left: 10px;
    }
</style>
